import { DictValueEnumObj } from '@/components/DictTag';
import QestionForm from './questionForm';
import { Form, Modal, Tabs ,List} from 'antd';
import React, { useEffect } from 'react';
export type DictTypeFormData = Record<string, unknown> & Partial<API.System.DictType>;

const { TabPane } = Tabs;

export type DictTypeFormProps = {
  onCancel: (flag?: boolean, formVals?: DictTypeFormData) => void;
  onSubmit: (values: DictTypeFormData) => Promise<void>;
  open: boolean;
  values: Partial<API.System.DictType>;
  statusOptions: DictValueEnumObj;
};

const DictTypeForm: React.FC<DictTypeFormProps> = (props) => {
  const [form] = Form.useForm();

  const { statusOptions,values } = props;

  useEffect(() => {
    form.resetFields();
    form.setFieldsValue({
      dictId: props.values.dictId,
      dictName: props.values.dictName,
      dictType: props.values.dictType,
      status: props.values.status,
      createBy: props.values.createBy,
      createTime: props.values.createTime,
      updateBy: props.values.updateBy,
      updateTime: props.values.updateTime,
      remark: props.values.remark,
    });
  }, [form, props]);

  const handleOk = () => {
    form.submit();
  };
  const handleCancel = () => {
    props.onCancel();
  };

  const handleFinish = async (values: Record<string, any>) => {
    props.onSubmit(values as DictTypeFormData);
  };
  function callbackTabs(key: string) {
    console.log(key);
  }
  const data = [
    {
      title: '意见 1',
    },
    {
      title: '意见 2',
    },
    {
      title: '意见 3',
    },
    {
      title: '意见 4',
    },
  ];
  return (
    <Modal
      width={1000}
      title="编辑"
      open={props.open}
      forceRender
      destroyOnClose
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Tabs defaultActiveKey="1" onChange={callbackTabs}>
        <TabPane tab="质量问题上报" key="1">
          <QestionForm statusOptions={statusOptions} values={values} onSubmit={handleFinish}/>
        </TabPane>
        <TabPane tab="意见栏" key="2">
          <List
            className="demo-loadmore-list"
            itemLayout="horizontal"
            dataSource={data}
            renderItem={(item) => (
              <List.Item
              >
               <List.Item.Meta
                    title={<a href="https://ant.design">{item.title}</a>}
                    description={<div><span>林老师</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>技术部</span></div>}
                  />
                  <div>2023-10-09 12:34:23</div>
              </List.Item>
            )}
          />
        </TabPane>
      </Tabs>
    </Modal>
  );
};

export default DictTypeForm;
